<!-- 

	Author: 	Seppe Staes
	Date:		06/2013
	
	Purpose:	AppContainerLayoutView
				Views 'injected' in 'header', 'content' and 'footer'

  -->
  
<!DOCTYPE html>
<html lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<meta charset="utf-8">
	<title>e-Dossier</title>
	<meta name="description" content="">
	<meta name="author" content="">
	<link href="../css/credoc-bootstrap.min.css" rel="stylesheet">
	
	<!-- Temporary link... before merging into credoc-bootstrap.min.css -->
	<link href="../css/credoc.css" rel="stylesheet">
</head>

<body style="padding-top: 0px;">

	<div class="navbar navbar-fixed-top">
		<div class="navbar-inner">
			<div class="container-fluid">
				
				<div class="top-nav">
					
					<a href="index.html" class="pull-left"><img src="../img/logo.png" height="34" width="85"></a>
				
		            <ul class="nav pull-left" style="margin-top: -6px;">
			            <li class="dropdown offset2">
			            
			              <a href="#" class="dropdown-toggle" data-toggle="dropdown">
			              	<div style="vertical-align: middle; width: 100px;">
				              	<div style="float: right; padding-top: 4px; padding-left: 2px;">
					              	<b class="caret"></b>
					            </div>
				              	<div style="float: right;">
					              	<span class="notif-surround" style="margin-top: 3px;">
					              		<span class="badge badge-important notif-background">12</span>
					              	</span>
					            </div>
				              	<div style="float: right; padding-right: 4px; padding-top: 3px; color: #B3B3B3;">
				              		To sign 
				              	</div>
					      	</div>  
			              </a>
			              
			              <ul class="dropdown-menu">
			                <li>
			                	<a href="#">
			                		Penholder: <b>Marie Dupont</b> <br>
			                		Deed Date: 05/07/2011 <br>
			                	</a>
			                </li>
			                <li>
			                	<a href="#">
			                		Penholder: <b>John Doe</b> <br>
			                		Deed Date: 05/05/2012 <br>
			                	</a>
			                </li>
			                <li>
			                	<a href="#">
			                		Penholder: <b>Ellen Petri</b> <br>
			                		Deed Date: 15/05/2012 <br>
			                	</a>
			                </li>
			                <li>
			                	<a href="#">
			                		Penholder: <b>Tanya Dexters</b> <br>
			                		Deed Date: 25/08/2012 <br>
			                	</a>
			                </li>
			                <li class="nav-header"><a href="#">See all</a></li>
			              </ul>
			              
			            </li>
		            </ul>
					
					<a href="" class="pull-right" style="padding-top: 5px; padding-right: 10px; color: #FFFFFF;"><i class="icon-search" style="color: #FFFFFF;"></i> Search</a>
				</div>
			</div>
		</div>

		<header>
			<ul class="breadcrumb" id="breadcrumb">
				<li><a href="">Dashboard</a></li>
			</ul>
		</header>
		
	</div> <!-- end navbar navbar-fixed-top -->

	<!-- 
	 	We need following construction to make sure the dashboard gets no vertical scroll bars
	 	The size of
	  -->
	<div id="app-container" class="container-fluid" style="background-color: white">
    <div id="menu-push"></div>
    <div class="row-fluid" style="padding-top: 100px;">
    
    		<div class="span3">
				<div class="widget-spacing">
					<button class="btn btn-primary">New eDossier</button>
				</div>
			</div>
			
			<div class="span4">
				<div class="widget-center">
					<div id="dossiers-widget" class="widget">
						<div id="edepot-widget-header" class="widget-header">
							<strong>eDepot</strong>
						</div>
						<div id="edepot-widget-body" class="widget-body">
							
						</div>
						<div id="edepot-widget-footer" class="widget-footer">
							<a href="">Show all eDepot projects</a>

						</div>
					</div>
				</div>
			</div>
			
			<div class="span5">
				<div class="widget-right">
					<div id="dossiers-widget" class="widget">
						<div id="dossiers-widget-header" class="widget-header">
							<strong>Latest eDossiers</strong>
						</div>
						<div id="dossiers-widget-body" class="widget-body">
				
							<div class="media">
								<a class="pull-left" href="#"> <img class="media-object"
									src="../img/icon_edossier.png">
								</a>
								<div class="media-body">
									<h6 class="media-heading">Donec at erat diam. Ut nec dui eu eros laoreet tincidunt. Nulla varius odio sed justo faucibus fringilla.</h6>
									<div class="pull-left"><i class="icon-user"></i> <small>Coca Cola</small></div>
									<div class="pull-right"><i class="icon-calendar"></i> <small>30/02/2013</small></div>
								</div>
							</div>

							<div class="media">
								<a class="pull-left" href="#"> <img class="media-object"
									src="../img/icon_edossier.png">
								</a>
								<div class="media-body">
									<h6 class="media-heading">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</h6>
									<div class="pull-left"><i class="icon-user"></i> <small>Marie Dupont</small></div>
									<div class="pull-right"><i class="icon-calendar"></i> <small>02/05/2011</small></div>
								</div>
							</div>
							
							<div class="media">
								<a class="pull-left" href="#"> <img class="media-object"
									src="../img/icon_edossier.png">
								</a>
								<div class="media-body">
									<h6 class="media-heading">Openbare verkoop, John Doe & Marie Dupont</h6>
									<div class="pull-left"><i class="icon-user"></i> <small>John Doe</small></div>
									<div class="pull-right"><i class="icon-calendar"></i> <small>02/05/2013</small></div>
								</div>
							</div>

							<div class="media">
								<a class="pull-left" href="#"> <img class="media-object"
									src="../img/icon_edossier.png">
								</a>
								<div class="media-body">
									<h6 class="media-heading">Aenean malesuada libero eget ante consectetur at lobortis velit mollis. Aenean posuere aliquet erat ut consequat.</h6>
									<div class="pull-left"><i class="icon-user"></i> <small>Nicorette</small></div>
									<div class="pull-right"><i class="icon-calendar"></i> <small>02/02/2011</small></div>
								</div>
							</div>
							
							<div class="media">
								<a class="pull-left" href="#"> <img class="media-object"
									src="../img/icon_edossier.png">
								</a>
								<div class="media-body">
									<h6 class="media-heading">Donec at erat diam. Ut nec dui eu eros laoreet tincidunt. Nulla varius odio sed justo faucibus fringilla.</h6>
									<div class="pull-left"><i class="icon-user"></i> <small>Coca Cola</small></div>
									<div class="pull-right"><i class="icon-calendar"></i> <small>30/02/2013</small></div>
								</div>
							</div>
							
							<div class="media">
								<a class="pull-left" href="#"> <img class="media-object"
									src="../img/icon_edossier.png">
								</a>
								<div class="media-body">
									<h6 class="media-heading">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</h6>
									<div class="pull-left"><i class="icon-user"></i> <small>Marie Dupont</small></div>
									<div class="pull-right"><i class="icon-calendar"></i> <small>02/05/2011</small></div>
								</div>
							</div>
							
							<div class="media">
								<a class="pull-left" href="#"> <img class="media-object"
									src="../img/icon_edossier.png">
								</a>
								<div class="media-body">
									<h6 class="media-heading">Openbare verkoop, John Doe & Marie Dupont</h6>
									<div class="pull-left"><i class="icon-user"></i> <small>John Doe</small></div>
									<div class="pull-right"><i class="icon-calendar"></i> <small>02/05/2013</small></div>
								</div>
							</div>

							<div class="media">
								<a class="pull-left" href="#"> <img class="media-object"
									src="../img/icon_edossier.png">
								</a>
								<div class="media-body">
									<h6 class="media-heading">Aenean malesuada libero eget ante consectetur at lobortis velit mollis. Aenean posuere aliquet erat ut consequat.</h6>
									<div class="pull-left"><i class="icon-user"></i> <small>Nicorette</small></div>
									<div class="pull-right"><i class="icon-calendar"></i> <small>02/02/2011</small></div>
								</div>
							</div>
							
							<div class="media">
								<a class="pull-left" href="#"> <img class="media-object"
									src="../img/icon_edossier.png">
								</a>
								<div class="media-body">
									<h6 class="media-heading">Donec at erat diam. Ut nec dui eu eros laoreet tincidunt. Nulla varius odio sed justo faucibus fringilla.</h6>
									<div class="pull-left"><i class="icon-user"></i> <small>Coca Cola</small></div>
									<div class="pull-right"><i class="icon-calendar"></i> <small>30/02/2013</small></div>
								</div>
							</div>
							
						</div>
						<div id="dossiers-widget-footer" class="widget-footer">
							<a href="">Show all</a>

						</div>
					</div>
				</div>
			</div>
		</div>
	</div>   
	
	<!-- LIBRARY -->
	<script src="../js/credoc-scripts.min.js"></script>
	<script src="../js/bootstrap-affix.js"></script>
	
	<script type="text/javascript">
		$('body').tooltip({
			selector : '[rel=tooltip]'
		});
	</script>
	
	<script type="text/javascript">

		// Make sure the widget sizes are set correctly after loading the page
		window.onload = function() {
		  resize( $('#dossiers-widget-header'), $('#dossiers-widget-footer'), $('#dossiers-widget-body') );
		  // resize( $('#edepot-widget-header'), $('#edepot-widget-footer'), $('#edepot-widget-body') );
		};
		
		// add a window resize listener
		$(window).resize( function(){
			resize( $('#dossiers-widget-header'), $('#dossiers-widget-footer'), $('#dossiers-widget-body') );
			// resize( $('#edepot-widget-header'), $('#edepot-widget-footer'), $('#edepot-widget-body') );
		});
		
		// check the browser size
		function resize( header, footer, body ){
		
			// get height of the window
			var h_window = $(window).height();
			
			// get height of the header
			var h_navbar = $('.navbar').height();
			
			// get height of widget header
			var h_header = header.height();
			
			// get height of widget footer
			var h_footer = footer.height();
			
			// set dossier-widget's height
			// set the modal's height
			body.height( h_window - h_navbar - 95 - 40 + "px" );
		}
		
		// hover color tweens
		$('.media').hover(
			function () {
	           $(this).css({"background-color":"#E0E0E0"});
	         }, 
	         function () {
	           $(this).css({"background-color":"white"});
	         }
		);
		
	</script>
</body>
</html>